<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>面经 H5 端 - Vant（上） | 92-YYDS</title>
    <meta name="generator" content="VuePress 1.9.9">
    <link rel="icon" href="/rz_doc_92/favicon.ico">
    <link rel="apple-touch-icon" href="/rz_doc_92/apple-touch-icon.png">
    <meta name="description" content="">
    <meta name="referrer" content="no-referrer">
    
    <link rel="preload" href="/rz_doc_92/assets/css/0.styles.eb696f23.css" as="style"><link rel="preload" href="/rz_doc_92/assets/js/app.c37b6607.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/3.fe9c6282.js" as="script"><link rel="preload" href="/rz_doc_92/assets/js/6.af284094.js" as="script"><link rel="prefetch" href="/rz_doc_92/assets/js/10.a815e7f8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/11.5cf73907.js"><link rel="prefetch" href="/rz_doc_92/assets/js/12.8364f023.js"><link rel="prefetch" href="/rz_doc_92/assets/js/13.189305ad.js"><link rel="prefetch" href="/rz_doc_92/assets/js/14.28e18334.js"><link rel="prefetch" href="/rz_doc_92/assets/js/15.bc379ff7.js"><link rel="prefetch" href="/rz_doc_92/assets/js/16.63adadba.js"><link rel="prefetch" href="/rz_doc_92/assets/js/17.28e8fcdb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/18.917dcdd1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/19.e231595a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/2.c35adb5c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/20.d1e0017d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/21.4f9461ca.js"><link rel="prefetch" href="/rz_doc_92/assets/js/22.8bd2376c.js"><link rel="prefetch" href="/rz_doc_92/assets/js/23.535f0a8f.js"><link rel="prefetch" href="/rz_doc_92/assets/js/24.c596c341.js"><link rel="prefetch" href="/rz_doc_92/assets/js/25.b3cb2221.js"><link rel="prefetch" href="/rz_doc_92/assets/js/26.fac4fec9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/27.77d2df1d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/28.51cbe5c1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/29.0193e27d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/30.b6174252.js"><link rel="prefetch" href="/rz_doc_92/assets/js/31.985027ac.js"><link rel="prefetch" href="/rz_doc_92/assets/js/32.3dd61489.js"><link rel="prefetch" href="/rz_doc_92/assets/js/33.45abb40d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/34.91103b73.js"><link rel="prefetch" href="/rz_doc_92/assets/js/35.2a882fa8.js"><link rel="prefetch" href="/rz_doc_92/assets/js/36.3b80d6cf.js"><link rel="prefetch" href="/rz_doc_92/assets/js/37.11f329d1.js"><link rel="prefetch" href="/rz_doc_92/assets/js/38.974df1fd.js"><link rel="prefetch" href="/rz_doc_92/assets/js/39.7cc0e285.js"><link rel="prefetch" href="/rz_doc_92/assets/js/4.219d9d15.js"><link rel="prefetch" href="/rz_doc_92/assets/js/40.a928365a.js"><link rel="prefetch" href="/rz_doc_92/assets/js/41.6be66339.js"><link rel="prefetch" href="/rz_doc_92/assets/js/42.31ef2deb.js"><link rel="prefetch" href="/rz_doc_92/assets/js/43.9b423721.js"><link rel="prefetch" href="/rz_doc_92/assets/js/44.f020f7e9.js"><link rel="prefetch" href="/rz_doc_92/assets/js/45.79487c7e.js"><link rel="prefetch" href="/rz_doc_92/assets/js/5.b9d7eb6d.js"><link rel="prefetch" href="/rz_doc_92/assets/js/7.2449c640.js"><link rel="prefetch" href="/rz_doc_92/assets/js/8.e6bfdace.js"><link rel="prefetch" href="/rz_doc_92/assets/js/9.4f10b15a.js">
    <link rel="stylesheet" href="/rz_doc_92/assets/css/0.styles.eb696f23.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/rz_doc_92/" class="home-link router-link-active"><img src="/rz_doc_92/doraameng.jpg" alt="92-YYDS" class="logo"> <span class="site-name can-hide">92-YYDS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link router-link-active">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/rz_doc_92/vue/" class="nav-link router-link-active">
  vue基础
</a></div><div class="nav-item"><a href="/rz_doc_92/rz/" class="nav-link">
  人资笔记
</a></div><div class="nav-item"><a href="/rz_doc_92/xcx/" class="nav-link">
  小程序
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="vue资源网站" class="dropdown-title"><span class="title">vue资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="vue资源网站" class="mobile-dropdown-title"><span class="title">vue资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          人资相关网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.apifox.cn/apidoc/shared-e2644216-aad4-4529-a630-78f0631ab076/api-49562537" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://gitee.com/errlei/rz_92" target="_blank" rel="noopener noreferrer" class="nav-link external">
  老师上课码云地址
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://heimahr.itheima.net/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  人资预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  检查大家每日收获网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://panjiachen.gitee.io/vue-element-admin/#/login" target="_blank" rel="noopener noreferrer" class="nav-link external">
  element项目预览网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          vue全家桶官网
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue2
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vue Router
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  VueX
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://axios-http.com/zh/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="http://chengqige.com/axios/#/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Axios备用网站
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://element.eleme.cn/#/zh-CN" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Element UI
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          工具网站
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://crxdl.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  谷歌插件
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.axureshop.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  产品原型网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="小程序资源网站" class="dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow down"></span></button> <button type="button" aria-label="小程序资源网站" class="mobile-dropdown-title"><span class="title">小程序资源网站</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          原生小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://mp.weixin.qq.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  微信公众平台-登录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://apifox.com/apidoc/shared-8d66c345-7a9a-4844-9a5a-1201852f6faa/doc-1492243" target="_blank" rel="noopener noreferrer" class="nav-link external">
  小程序接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://vant-contrib.gitee.io/vant-weapp/#/home" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Vant Weapp
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.zhixi.com/share/305d8208" target="_blank" rel="noopener noreferrer" class="nav-link external">
  在线思维导图
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://opendocs.alipay.com/mini/introduce" target="_blank" rel="noopener noreferrer" class="nav-link external">
  支付宝小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/introduction" target="_blank" rel="noopener noreferrer" class="nav-link external">
  抖音小程序开发文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          uni-app小程序
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.showdoc.com.cn/128719739414963/2513235043485226" target="_blank" rel="noopener noreferrer" class="nav-link external">
  接口文档
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://uniapp.dcloud.net.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uni-app小程序
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://www.uviewui.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  uView
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div><div class="nav-item"><a href="/rz_doc_92/interview/" class="nav-link">
  必会面试题
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/01" class="sidebar-heading clickable"><span>1-vue基本概念</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/02" class="sidebar-heading clickable"><span>2-vue指令</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day03-组件基础+组件通讯" class="sidebar-heading clickable"><span>3-day03-组件基础+组件通讯</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day04-组件进阶" class="sidebar-heading clickable"><span>4-day04-组件进阶</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day05-生命周期+路由+组件缓存" class="sidebar-heading clickable"><span>5-day05-生命周期+路由+组件缓存</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）" class="sidebar-heading clickable open active"><span>6-day06-面经H5端-Vant（上）</span> <span class="arrow down"></span></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html" class="active sidebar-link">面经 H5 端 - Vant（上）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#项目创建目录初始化" class="sidebar-link">项目创建目录初始化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#vue-cli-建项目" class="sidebar-link">vue-cli 建项目</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#eslint代码规范" class="sidebar-link">ESlint代码规范</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#调整初始化目录结构" class="sidebar-link">调整初始化目录结构</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#vant-按需加载" class="sidebar-link">vant 按需加载</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#vant-ui组件库的引入" class="sidebar-link">vant-ui组件库的引入</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#全部导入" class="sidebar-link">全部导入</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#按需加载" class="sidebar-link">按需加载</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#项目中的vw适配" class="sidebar-link">项目中的vw适配</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#request模块-axios封装" class="sidebar-link">request模块 - axios封装</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#local模块-本地存储" class="sidebar-link">local模块 - 本地存储</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#路由设计配置" class="sidebar-link">路由设计配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#一级路由" class="sidebar-link">一级路由</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#tabbar标签页" class="sidebar-link">tabbar标签页</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#二级路由" class="sidebar-link">二级路由</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#主题定制-可选" class="sidebar-link">主题定制(可选)</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#登录-注册功能" class="sidebar-link">登录&amp;注册功能</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#登录静态布局" class="sidebar-link">登录静态布局</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#注册静态布局" class="sidebar-link">注册静态布局</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#toast-轻提示" class="sidebar-link">toast 轻提示</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#封装api接口-注册功能" class="sidebar-link">封装api接口 - 注册功能</a></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#封装api接口-登录功能" class="sidebar-link">封装api接口 - 登录功能</a></li></ul></li><li class="sidebar-sub-header"><a href="/rz_doc_92/vue/day06-面经H5端-Vant（上）.html#页面访问拦截" class="sidebar-link">页面访问拦截</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day07-面经H5端-Vant（下）" class="sidebar-heading clickable"><span>7-day07-面经H5端-Vant（下）</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day09-面经PC端-element（上）" class="sidebar-heading clickable"><span>9-day09-面经PC端-element（上）</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/rz_doc_92/vue/day10-面经PC端-element（下）" class="sidebar-heading clickable"><span>10-day10-面经PC端-element（下）</span> <span class="arrow right"></span></a> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="面经-h5-端-vant-上"><a href="#面经-h5-端-vant-上" class="header-anchor">#</a> 面经 H5 端 - Vant（上）</h1> <p>接口文档地址：https://www.apifox.cn/apidoc/project-934563/api-20384515</p> <h2 id="项目创建目录初始化"><a href="#项目创建目录初始化" class="header-anchor">#</a> 项目创建目录初始化</h2> <h3 id="vue-cli-建项目"><a href="#vue-cli-建项目" class="header-anchor">#</a> vue-cli 建项目</h3> <p>安装脚手架 (已安装)</p> <div class="language- extra-class"><pre class="language-text"><code>npm i @vue/cli -g
</code></pre></div><p>创建项目</p> <div class="language- extra-class"><pre class="language-text"><code>vue create hm-vant-h5
</code></pre></div><ul><li>选项</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>Vue <span class="token constant">CLI</span> v5<span class="token punctuation">.</span><span class="token number">0.4</span>
<span class="token operator">?</span> Please pick a preset<span class="token operator">:</span> <span class="token punctuation">(</span>Use arrow keys<span class="token punctuation">)</span>
  <span class="token function">Default</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>Vue <span class="token number">3</span><span class="token punctuation">]</span> babel<span class="token punctuation">,</span> eslint<span class="token punctuation">)</span>
  <span class="token function">Default</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>Vue <span class="token number">2</span><span class="token punctuation">]</span> babel<span class="token punctuation">,</span> eslint<span class="token punctuation">)</span>
<span class="token operator">&gt;</span> Manually select features      选自定义
</code></pre></div><ul><li>手动选择功能</li></ul> <p><img src="/rz_doc_92/assets/img/image-20220613025258757.3c9dd66f.png" alt="image-20220613025258757"></p> <ul><li>选择vue的版本</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code>  <span class="token number">3</span><span class="token punctuation">.</span>x
<span class="token operator">&gt;</span> <span class="token number">2</span><span class="token punctuation">.</span>x
</code></pre></div><ul><li>是否使用history模式</li></ul> <p><img src="/rz_doc_92/assets/img/image-20201025150602129.7b47684c.png" alt="image-20201025150602129"></p> <ul><li>选择css预处理</li></ul> <p><img src="/rz_doc_92/assets/img/image-20220629175133593.3d524ba4.png" alt="image-20220629175133593"></p> <ul><li>选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）</li> <li>比如：const age = 18;   =&gt;  报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子</li></ul> <p><img src="" alt="image-20201025150814535"></p> <ul><li>选择校验的时机 （直接回车）</li></ul> <p><img src="/rz_doc_92/assets/img/image-20220613025447141.85a39068.png" alt="image-20220613025447141"></p> <ul><li>选择配置文件的生成方式 （直接回车）</li></ul> <p><img src="/rz_doc_92/assets/img/image-20201025151123023.5438fdc1.png" alt="image-20201025151123023"></p> <ul><li>是否保存预设，下次直接使用？  =&gt;   不保存，输入 N</li></ul> <p><img src="/rz_doc_92/assets/img/image-20220613025710360.b94e4fb5.png" alt="image-20220613025710360"></p> <ul><li>等待安装，项目初始化完成</li></ul> <p><img src="/rz_doc_92/assets/img/image-20220613025814865.f9586507.png" alt="image-20220613025814865"></p> <ul><li>启动项目</li></ul> <div class="language- extra-class"><pre class="language-text"><code>npm run serve
</code></pre></div><h3 id="eslint代码规范"><a href="#eslint代码规范" class="header-anchor">#</a> ESlint代码规范</h3> <p>代码规范：一套写代码的约定规则。例如：赋值符号的左右是否需要空格？一句结束是否是要加;？...</p> <blockquote><p>没有规矩不成方圆</p></blockquote> <p>ESLint:是一个代码检查工具，用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时，我们使用的是 <a href="https://standardjs.com/readme-zhcn.html" target="_blank" rel="noopener noreferrer">JavaScript Standard Style<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 代码风格的规则。</p> <h4 id="javascript-standard-style-规范说明"><a href="#javascript-standard-style-规范说明" class="header-anchor">#</a> JavaScript Standard Style 规范说明</h4> <p>建议把：https://standardjs.com/rules-zhcn.html 看一遍，然后在写的时候,  遇到错误就查询解决。</p> <p>下面是这份规则中的一小部分：</p> <ul><li><em>字符串使用单引号</em> – 需要转义的地方除外</li> <li><em>无分号</em> – <a href="http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding" target="_blank" rel="noopener noreferrer">这<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><a href="http://inimino.org/~inimino/blog/javascript_semicolons" target="_blank" rel="noopener noreferrer">没什么不好。<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a><a href="https://www.youtube.com/watch?v=gsfbh17Ax9I" target="_blank" rel="noopener noreferrer">不骗你！<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><em>关键字后加空格</em> <code>if (condition) { ... }</code></li> <li><em>函数名后加空格</em> <code>function name (arg) { ... }</code></li> <li>坚持使用全等 <code>===</code> 摒弃 <code>==</code> 一但在需要检查 <code>null || undefined</code> 时可以使用 <code>obj == null</code></li> <li>......</li></ul> <h4 id="代码规范错误"><a href="#代码规范错误" class="header-anchor">#</a> 代码规范错误</h4> <p>如果你的代码不符合standard的要求，eslint会跳出来刀子嘴，豆腐心地提示你。</p> <p>下面我们在main.js中随意做一些改动：添加一些空行，空格。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>

<span class="token keyword">import</span> <span class="token string">'./styles/index.less'</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span>
Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
  <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span>
  router
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>


</code></pre></div><p>按下保存代码之后：</p> <p>你将会看在控制台中输出如下错误：</p> <p><img src="/rz_doc_92/assets/img/image-20200503164627096.fc5df0e5.png" alt="image-20200503164627096"></p> <blockquote><p>eslint 是来帮助你的。心态要好，有错，就改。</p></blockquote> <h4 id="手动修正"><a href="#手动修正" class="header-anchor">#</a> 手动修正</h4> <p>根据错误提示来一项一项手动修正。</p> <p>如果你不认识命令行中的语法报错是什么意思，你可以根据错误代码（func-call-spacing, space-in-parens,.....）去 ESLint 规则列表中查找其具体含义。</p> <p>打开 <a href="https://cn.eslint.org/docs/rules/" target="_blank" rel="noopener noreferrer">ESLint 规则表<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，使用页面搜索（Ctrl + F）这个代码，查找对该规则的一个释义。</p> <p><img src="/rz_doc_92/assets/img/1561024887156.185e698d.png" alt="1561024887156"></p> <h4 id="通过vscode中的eslint插件来实现自动修正"><a href="#通过vscode中的eslint插件来实现自动修正" class="header-anchor">#</a> 通过vscode中的eslint插件来实现自动修正</h4> <blockquote><ol><li>eslint会自动高亮错误显示</li> <li>通过配置，eslint会自动帮助我们修复错误</li></ol></blockquote> <ul><li>如何安装</li></ul> <p><img src="/rz_doc_92/assets/img/image-20220613030644036.57b999d3.png" alt="image-20220613030644036"></p> <ul><li>如何配置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 当保存的时候，eslint自动帮我们修复错误</span>
<span class="token string-property property">&quot;editor.codeActionsOnSave&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;source.fixAll&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// 保存代码，不自动格式化</span>
<span class="token string-property property">&quot;editor.formatOnSave&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
</code></pre></div><ul><li>注意：==eslint的配置文件必须在根目录下，这个插件才能才能生效。打开项目必须以根目录打开，一次打开一个项目==</li> <li>注意：==使用了eslint校验之后，把vscode带的那些格式化工具全禁用了 Beatify ==</li></ul> <p>我的完整配置，供参考</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token punctuation">{</span>
  <span class="token string-property property">&quot;editor.tabSize&quot;</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;workbench.iconTheme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vscode-icons&quot;</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;explorer.compactFolders&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;security.workspace.trust.untrustedFiles&quot;</span><span class="token operator">:</span> <span class="token string">&quot;open&quot;</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;git.enableSmartCommit&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 不要有分号</span>
  <span class="token string-property property">&quot;prettier.semi&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token comment">// 使用单引号</span>
  <span class="token string-property property">&quot;prettier.singleQuote&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 默认使用prittier作为格式化工具</span>
  <span class="token string-property property">&quot;editor.defaultFormatter&quot;</span><span class="token operator">:</span> <span class="token string">&quot;esbenp.prettier-vscode&quot;</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;emmet.showAbbreviationSuggestions&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;emmet.includeLanguages&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;javascript&quot;</span><span class="token operator">:</span> <span class="token string">&quot;javascriptreact&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;editor.suggest.snippetsPreventQuickSuggestions&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;editor.fontSize&quot;</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>  <span class="token comment">// 设置文字的大小</span>
  <span class="token string-property property">&quot;window.zoomLevel&quot;</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token string-property property">&quot;emmet.triggerExpansionOnTab&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token comment">// 保存时自动格式化 - 按照eslint的规则格式化</span>
  <span class="token string-property property">&quot;editor.codeActionsOnSave&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">&quot;source.fixAll&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 保存代码，不自动格式化</span>
  <span class="token string-property property">&quot;editor.formatOnSave&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span>
<span class="token punctuation">}</span>
</code></pre></div><p><img src="/rz_doc_92/assets/img/image-20220629182346634.9b428848.png" alt="image-20220629182346634"></p> <p><img src="/rz_doc_92/assets/img/image-20220629182357191.4c33d9f3.png" alt="image-20220629182357191"></p> <p>禁用 volar （Vue3）</p> <p><img src="/rz_doc_92/assets/img/image-20220629182600355.6d529c79.png" alt="image-20220629182600355"></p> <h3 id="调整初始化目录结构"><a href="#调整初始化目录结构" class="header-anchor">#</a> 调整初始化目录结构</h3> <blockquote><p>强烈建议大家严格按照老师的步骤进行调整，为了符合企业规范</p></blockquote> <p>为了更好的实现后面的操作，我们把整体的目录结构做一些调整。</p> <p>目标:</p> <ol><li>删除初始化的一些默认文件</li> <li>修改没删除的文件</li> <li>新增我们需要的目录结构</li></ol> <h4 id="修改文件"><a href="#修改文件" class="header-anchor">#</a> 修改文件</h4> <p><code>public/index.html</code> 修改视口，开发的是移动端项目</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span>
  <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width,initial-scale=1.0, user-scalable=0<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">/&gt;</span></span>
</code></pre></div><p><code>main.js</code> 不需要修改</p> <p><code>router/index.js</code></p> <p>删除默认的路由配置</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span>

<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
<span class="token punctuation">]</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router

</code></pre></div><p><code>App.vue</code></p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="删除文件"><a href="#删除文件" class="header-anchor">#</a> 删除文件</h4> <ul><li><p>src/views/AboutView.vue</p></li> <li><p>src/views/HomeView.vue</p></li> <li><p>src/components/HelloWorld.vue</p></li> <li><p>src/assets/logo.png</p></li></ul> <h4 id="新增目录"><a href="#新增目录" class="header-anchor">#</a> 新增目录</h4> <ul><li>src/api 目录
<ul><li>存储接口模块 (发送ajax请求接口的模块)</li></ul></li> <li>src/utils 目录
<ul><li>存储一些工具模块 (自己封装的方法)</li></ul></li></ul> <ul><li>src/assets目录
<ul><li>新增项目使用的素材</li></ul></li></ul> <p>目录效果如下:</p> <p><img src="/rz_doc_92/assets/img/image-20220613033022857.1259a29d.png" alt="image-20220613033022857"></p> <h2 id="vant-按需加载"><a href="#vant-按需加载" class="header-anchor">#</a> vant 按需加载</h2> <h3 id="vant-ui组件库的引入"><a href="#vant-ui组件库的引入" class="header-anchor">#</a> vant-ui组件库的引入</h3> <blockquote><p>组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。</p> <p>https://vant-contrib.gitee.io/vant/v2/#/zh-CN/</p></blockquote> <p>组件库并不是唯一的</p> <p>pc:  element-ui     iview      <strong>ant-design</strong></p> <p>移动：vant-ui</p> <h3 id="全部导入"><a href="#全部导入" class="header-anchor">#</a> 全部导入</h3> <ul><li>安装vant-ui</li></ul> <div class="language- extra-class"><pre class="language-text"><code>npm i vant@latest-v2  或  yarn add vant@latest-v2
</code></pre></div><ul><li>在main.js中</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> Vant <span class="token keyword">from</span> <span class="token string">'vant'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'vant/lib/index.css'</span><span class="token punctuation">;</span>
<span class="token comment">// 把vant中所有的组件都导入了</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vant<span class="token punctuation">)</span>
</code></pre></div><ul><li>即可使用</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">主要按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">信息按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><img src="" alt="image-20220613034144156"></p> <p>==vant-ui提供了很多的组件，全部导入，会导致项目打包变得很大。==</p> <h3 id="按需加载"><a href="#按需加载" class="header-anchor">#</a> 按需加载</h3> <ul><li>安装vant-ui</li></ul> <div class="language- extra-class"><pre class="language-text"><code>npm i vant@latest-v2  或  yarn add vant@latest-v2
</code></pre></div><ul><li>安装一个插件</li></ul> <div class="language-jsd extra-class"><pre class="language-text"><code>npm i babel-plugin-import -D
</code></pre></div><ul><li>在<code>babel.config.js</code>中配置</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'@vue/cli-plugin-babel/preset'</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'vant'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'vant'</span><span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li>按需加载，在<code>main.js</code></li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Button<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Icon<span class="token punctuation">)</span>
</code></pre></div><ul><li>main.js中引入</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token string">'@/utils/vant'</span>
</code></pre></div><ul><li><code>app.vue</code>中进行测试</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>van<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">&quot;primary&quot;</span><span class="token operator">&gt;</span>主要按钮<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">&quot;info&quot;</span><span class="token operator">&gt;</span>信息按钮<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">&quot;default&quot;</span><span class="token operator">&gt;</span>默认按钮<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">&quot;warning&quot;</span><span class="token operator">&gt;</span>警告按钮<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>van<span class="token operator">-</span>button type<span class="token operator">=</span><span class="token string">&quot;danger&quot;</span><span class="token operator">&gt;</span>危险按钮<span class="token operator">&lt;</span><span class="token operator">/</span>van<span class="token operator">-</span>button<span class="token operator">&gt;</span>
</code></pre></div><h2 id="项目中的vw适配"><a href="#项目中的vw适配" class="header-anchor">#</a> 项目中的vw适配</h2> <p>官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage</p> <div class="language-js extra-class"><pre class="language-js"><code>yarn add postcss<span class="token operator">-</span>px<span class="token operator">-</span>to<span class="token operator">-</span>viewport@<span class="token number">1.1</span><span class="token number">.1</span> <span class="token operator">-</span><span class="token constant">D</span>
</code></pre></div><ul><li>项目根目录， 新建postcss的配置文件<code>postcss.config.js</code></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// postcss.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string-property property">'postcss-px-to-viewport'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">viewportWidth</span><span class="token operator">:</span> <span class="token number">375</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="request模块-axios封装"><a href="#request模块-axios封装" class="header-anchor">#</a> request模块 - axios封装</h2> <p>接口文档地址：http://interview-api-t.itheima.net/swagger-ui/index.html#/</p> <p>我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)</p> <p>一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用</p> <ol><li>安装 axios</li></ol> <div class="language- extra-class"><pre class="language-text"><code>npm i axios
</code></pre></div><ol start="2"><li><p>新建 <code>utils/request.js</code> 封装 axios 模块</p> <p>利用 axios.create 创建一个自定义的 axios 来使用</p> <p>http://www.axios-js.com/zh-cn/docs/#axios-create-config</p></li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">/* 封装axios用于发送请求 */</span>
<span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span>

<span class="token comment">// 创建一个新的axios实例</span>
<span class="token keyword">const</span> request <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">baseURL</span><span class="token operator">:</span> <span class="token string">'http://interview-api-t.itheima.net/h5/'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">5000</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 添加请求拦截器</span>
request<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 在发送请求之前做些什么</span>
  <span class="token keyword">return</span> config
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 对请求错误做些什么</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 添加响应拦截器</span>
request<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 对响应数据做点什么</span>
  <span class="token keyword">return</span> response<span class="token punctuation">.</span>data
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 对响应错误做点什么</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> request
</code></pre></div><ol start="3"><li>测试 (可以先注册后登录)</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// const res = await request.post('/user/register', {</span>
    <span class="token comment">//   username: 'shuaipeng',</span>
    <span class="token comment">//   password: '123456'</span>
    <span class="token comment">// })</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> request<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token string">'shuaipeng'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">password</span><span class="token operator">:</span> <span class="token string">'123456'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><p><img src="/rz_doc_92/assets/img/image-20220614054157121.fdc4144c.png" alt="image-20220614054157121"></p> <h2 id="local模块-本地存储"><a href="#local模块-本地存储" class="header-anchor">#</a> local模块 - 本地存储</h2> <p>新建 utils/storage.js</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 以前 token 令牌，如果存到了本地，每一次都写这么长，太麻烦</span>
<span class="token comment">// localStorage.setItem(键， 值)</span>
<span class="token comment">// localStorage.getItem(键)</span>
<span class="token comment">// localStorage.removeItem(键)</span>

<span class="token keyword">const</span> <span class="token constant">KEY</span> <span class="token operator">=</span> <span class="token string">'my-token-vant-mobile'</span>

<span class="token comment">// 直接用按需导出，可以导出多个</span>
<span class="token comment">// 但是按需导出，导入时必须 import { getToken } from '模块名导入'</span>
<span class="token comment">// 获取</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">getToken</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 设置</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">setToken</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">newToken</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">,</span> newToken<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token comment">// 删除</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">delToken</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span><span class="token constant">KEY</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre></div><h2 id="路由设计配置"><a href="#路由设计配置" class="header-anchor">#</a> 路由设计配置</h2> <p>但凡是单个页面，独立展示的，都是一级路由</p> <p>路由设计：</p> <ul><li>登录页 （一级） login</li> <li>注册页（一级） register</li> <li>文章详情页（一级） detail</li> <li>首页（一级） layout
<ul><li>面经（二级）article</li> <li>收藏（二级）collect</li> <li>喜欢（二级）like</li> <li>我的（二级）my</li></ul></li></ul> <h3 id="一级路由"><a href="#一级路由" class="header-anchor">#</a> 一级路由</h3> <p><code>router/index.js</code>配置一级路由,  一级views组件于教学资料中直接 CV 即可</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> Login <span class="token keyword">from</span> <span class="token string">'@/views/login'</span>
<span class="token keyword">import</span> Register <span class="token keyword">from</span> <span class="token string">'@/views/register'</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'@/views/detail'</span>
<span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'@/views/layout'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Login <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/register'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Register <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/article/:id'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Detail <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">component</span><span class="token operator">:</span> Layout
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre></div><p>清理 <code>App.vue</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
export default {
  async created () {

  }
}
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="tabbar标签页"><a href="#tabbar标签页" class="header-anchor">#</a> tabbar标签页</h3> <p><img src="/rz_doc_92/assets/img/image-20220614061531984.eb7313d7.png" alt="image-20220614061531984"></p> <p>https://vant-contrib.gitee.io/vant/v2/#/zh-CN/tabbar</p> <p><code>main.js</code> 引入组件</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Button<span class="token punctuation">,</span> Icon<span class="token punctuation">,</span> Tabbar<span class="token punctuation">,</span> TabbarItem <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Tabbar<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>TabbarItem<span class="token punctuation">)</span>
</code></pre></div><p><code>layout.vue</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layout-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    首页架子 - 内容区域

    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>notes-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">面经</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>star-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">收藏</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>like-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">喜欢</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我的</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="二级路由"><a href="#二级路由" class="header-anchor">#</a> 二级路由</h3> <p><code>router/index.js</code>配置二级路由</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> VueRouter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> Login <span class="token keyword">from</span> <span class="token string">'@/views/login'</span>
<span class="token keyword">import</span> Register <span class="token keyword">from</span> <span class="token string">'@/views/register'</span>
<span class="token keyword">import</span> Detail <span class="token keyword">from</span> <span class="token string">'@/views/detail'</span>
<span class="token keyword">import</span> Layout <span class="token keyword">from</span> <span class="token string">'@/views/layout'</span>

<span class="token keyword">import</span> Like <span class="token keyword">from</span> <span class="token string">'@/views/like'</span>
<span class="token keyword">import</span> Article <span class="token keyword">from</span> <span class="token string">'@/views/article'</span>
<span class="token keyword">import</span> Collect <span class="token keyword">from</span> <span class="token string">'@/views/collect'</span>
<span class="token keyword">import</span> User <span class="token keyword">from</span> <span class="token string">'@/views/user'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRouter<span class="token punctuation">)</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Login <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/register'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Register <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/article/:id'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Detail <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">component</span><span class="token operator">:</span> Layout<span class="token punctuation">,</span>
      <span class="token literal-property property">redirect</span><span class="token operator">:</span> <span class="token string">'/article'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/article'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Article <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/like'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Like <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/collect'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> Collect <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/user'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> User <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> router
</code></pre></div><p><code>layout.vue</code> 配置路由出口,  配置 tabbar</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>layout-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">

    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar</span> <span class="token attr-name">route</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/article<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>notes-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">面经</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/collect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>star-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">收藏</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/like<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>like-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">喜欢</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-tabbar-item</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/user<span class="token punctuation">&quot;</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>user-o<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">我的</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar-item</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-tabbar</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>效果图：</p> <p><img src="/rz_doc_92/assets/img/image-20220701151639583.ab79c048.png" alt="image-20220701151639583"></p> <h2 id="主题定制-可选"><a href="#主题定制-可选" class="header-anchor">#</a> 主题定制(可选)</h2> <p>整体网站风格，其实都是橙色的，可以通过变量覆盖的方式，制定主题色</p> <p>https://vant-contrib.gitee.io/vant/v2/#/zh-CN/theme</p> <p><code>babel.config.js</code> 制定样式路径</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'@vue/cli-plugin-babel/preset'</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">libraryName</span><span class="token operator">:</span> <span class="token string">'vant'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">libraryDirectory</span><span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
      <span class="token comment">// 指定样式路径</span>
      <span class="token function-variable function">style</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/style/less</span><span class="token template-punctuation string">`</span></span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'vant'</span><span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>vue.config.js</code> 覆盖变量</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@vue/cli-service'</span><span class="token punctuation">)</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">transpileDependencies</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">less</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">lessOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">modifyVars</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">// 直接覆盖变量</span>
            <span class="token string-property property">'blue'</span><span class="token operator">:</span> <span class="token string">'#FA6D1D'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>重启服务器生效！</p> <h2 id="登录-注册功能"><a href="#登录-注册功能" class="header-anchor">#</a> 登录&amp;注册功能</h2> <h3 id="登录静态布局"><a href="#登录静态布局" class="header-anchor">#</a> 登录静态布局</h3> <p><img src="/rz_doc_92/assets/img/image-20220614062935057.412709e1.png" alt="image-20220614062935057"></p> <p>使用组件</p> <ul><li>van-nav-bar</li> <li>van-form</li> <li>van-field</li> <li>van-button</li></ul> <p><code>vant-ui.js</code> 注册</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>
  NavBar<span class="token punctuation">,</span>
  Form<span class="token punctuation">,</span>
  Field
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>NavBar<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Form<span class="token punctuation">)</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Field<span class="token punctuation">)</span>
</code></pre></div><p><code>login.vue</code> 使用</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    &lt;!-- 导航栏部分 --&gt;
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-nav-bar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>面经登录<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">

    &lt;!-- 一旦form表单提交了，就会触发submit，可以在submit事件中
         根据拿到的表单提交信息，发送axios请求
     --&gt;
    &lt;van-form @submit=&quot;onSubmit&quot;&gt;
      &lt;!-- 输入框组件 --&gt;
      &lt;!-- \w 字母数字_   \d 数字0-9 --&gt;
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span>
        <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[
          { required: true, message: '请填写用户名' },
          { pattern: /^\w{5,}$/, message: '用户名至少包含5个字符' }
        ]<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span>
        <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[
          { required: true, message: '请填写密码' },
          { pattern: /^\w{6,}$/, message: '密码至少包含6个字符' }
        ]<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin</span><span class="token punctuation">:</span> 16px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">block</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">native-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">提交</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-form</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
export default {
  name: 'login-page',
  data () {
    return {
      username: 'zhousg',
      password: '123456'
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>login.vue</code>添加 router-link 标签（跳转到注册）</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-nav-bar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>面经登录<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-form</span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onSubmit<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      ...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-form</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/register<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>注册账号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>login.vue</code>调整样式</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="注册静态布局"><a href="#注册静态布局" class="header-anchor">#</a> 注册静态布局</h3> <p><code>register.vue</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login-page<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-nav-bar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>面经注册<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">

    &lt;van-form @submit=&quot;onSubmit&quot;&gt;
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span>
        <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>用户名<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请填写用户名' }]<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-field</span>
        <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>密码<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>[{ required: true, message: '请填写密码' }]<span class="token punctuation">&quot;</span></span>
      <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">margin</span><span class="token punctuation">:</span> 16px</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>van-button</span> <span class="token attr-name">block</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">native-type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>submit<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">&gt;</span></span><span class="token plain-text">注册</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-button</span>
        <span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>van-form</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>link<span class="token punctuation">&quot;</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/login<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">有账号，去登录</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
export default {
  name: 'register-page',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    }
  }
}
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
.link {
  color: #069;
  font-size: 12px;
  padding-right: 20px;
  float: right;
}
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="toast-轻提示"><a href="#toast-轻提示" class="header-anchor">#</a> toast 轻提示</h3> <p>将来无论注册成功，还是失败，都是需要给用户提示的</p> <p>https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Toast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Toast<span class="token punctuation">)</span>
</code></pre></div><p>两种使用方式</p> <ol><li>导入，调用</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Toast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span><span class="token punctuation">;</span>
<span class="token function">Toast</span><span class="token punctuation">(</span><span class="token string">'提示内容'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>**组件内 **通过this直接调用</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$toast</span><span class="token punctuation">(</span><span class="token string">'提示内容'</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="封装api接口-注册功能"><a href="#封装api接口-注册功能" class="header-anchor">#</a> 封装api接口 - 注册功能</h3> <p>新建 <code>api/user.js</code> 提供注册 Api 函数</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">'@/utils/request'</span>

<span class="token comment">// 注册接口</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">register</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> request<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/register'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>register.vue</code>页面中调用测试</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">onSubmit</span> <span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 往后台发送注册请求了</span>
    <span class="token keyword">await</span> <span class="token function">register</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$toast<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'注册成功'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>request.js</code>响应拦截器，统一处理错误提示</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Toast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span>

<span class="token operator">...</span>

<span class="token comment">// 添加响应拦截器</span>
request<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 对响应数据做点什么</span>
  <span class="token keyword">return</span> response<span class="token punctuation">.</span>data
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 有错误响应, 提示错误提示</span>
    <span class="token function">Toast</span><span class="token punctuation">(</span>error<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>message<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 对响应错误做点什么</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="封装api接口-登录功能"><a href="#封装api接口-登录功能" class="header-anchor">#</a> 封装api接口 - 登录功能</h3> <p><code>api/user.js</code> 提供登录 Api 函数</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 登录接口</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">login</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> request<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/user/login'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p><code>login.vue</code> 登录功能</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> login <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/user'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> setToken <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/storage'</span>

<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">onSubmit</span> <span class="token punctuation">(</span><span class="token parameter">values</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">login</span><span class="token punctuation">(</span>values<span class="token punctuation">)</span>
    <span class="token function">setToken</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>token<span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$toast<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">'登录成功'</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="页面访问拦截"><a href="#页面访问拦截" class="header-anchor">#</a> 页面访问拦截</h2> <p>这个 面经移动端 项目，只对 登录用户 开放，如果未登录，一律拦截到登录</p> <ol><li><p>如果访问的是 <strong>首页</strong>，     无token， 拦走</p></li> <li><p>如果访问的是 <strong>列表页</strong>，无token， 拦走</p></li> <li><p>如果访问的是 <strong>详情页</strong>，无token， 拦走</p> <p>....</p></li></ol> <p>分析：哪些页面，是不需要登录，就可以访问的！  =&gt;  <strong>注册</strong>   和   <strong>登录</strong>  （白名单 - 游客可以随意访问的）</p> <p>核心逻辑：</p> <ol><li>判断用户有没有token， 有token， 直接放行  （有身份的人，想去哪就去哪~）</li> <li>没有token（游客），如果是白名单中的页面，直接放行</li> <li>否则，无token（游客），且在访问需要权限访问的页面，直接拦截到登录</li></ol> <p>vue路由内置了一个语法</p> <p><strong>全局前置守卫：</strong></p> <ol><li><p>所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫</p></li> <li><p>只有全局前置守卫放行，才能看到真正的页面</p></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code>
<span class="token comment">// 全局前置守卫：</span>
<span class="token comment">// 1. 所有的路由一旦被匹配到，在真正渲染解析之前，都会先经过全局前置守卫</span>
<span class="token comment">// 2. 只有全局前置守卫放行，才能看到真正的页面</span>

<span class="token comment">// 任何路由，被解析访问前，都会先执行这个回调</span>
<span class="token comment">// 1. from 你从哪里来， 从哪来的路由信息对象</span>
<span class="token comment">// 2. to   你往哪里去， 到哪去的路由信息对象</span>
<span class="token comment">// 3. next() 是否放行，如果next()调用，就是放行 =&gt; 放你去想去的页面</span>
<span class="token comment">//    next(路径) 拦截到某个路径页面</span>

<span class="token keyword">const</span> whiteList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token string">'/register'</span><span class="token punctuation">]</span> <span class="token comment">// 白名单列表，记录无需权限访问的所有页面</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> token <span class="token operator">=</span> <span class="token function">getToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 如果有token，直接放行</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>token<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token comment">// 没有token的人, 看看你要去哪</span>
    <span class="token comment">// (1) 访问的是无需授权的页面（白名单），也是放行</span>
    <span class="token comment">//     就是判断，访问的地址，是否在白名单数组中存在 includes</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>whiteList<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">// (2) 否则拦截到登录</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">'/login'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/rz_doc_92/vue/day05-生命周期+路由+组件缓存.html" class="prev">
        生命周期
      </a></span> <span class="next"><a href="/rz_doc_92/vue/day07-面经H5端-Vant（下）.html">
        面经 H5 端 - Vant（下）
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/rz_doc_92/assets/js/app.c37b6607.js" defer></script><script src="/rz_doc_92/assets/js/3.fe9c6282.js" defer></script><script src="/rz_doc_92/assets/js/6.af284094.js" defer></script>
  </body>
</html>
